import React from 'react';
import Icon from 'shared/components/base/Icon';
import Stepper from 'antd-mobile/lib/stepper';
import Button from 'antd-mobile/lib/button';
import isSroll from 'iscroll/build/iscroll-probe';
import classNames from 'classnames';
import toFixed from 'shared/utils/toFixed';
import './index.less';

export default class ProductDetail extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      selectProductNumber: this.props.selectProNumber || 1,
    }
  }

  componentDidMount() {
    document.querySelector('.product-select-dock')
      .addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    new isSroll('.product-type-list', {
      mouseWheel: true,
      click: true,
    });
  }

  handleSelectSku = (data) => {
    gloablMonitor(['商品详情页-选择产品', data.sku]);
    this.props.onSelectSku(data);
  }

  handleChangeProNumber = (num) => {
    this.setState({ selectProductNumber: num });
    this.props.onChangeSelectProNumber(num);
  }

  render() {
    const { selectProductNumber } = this.state;
    const { item = {} } = this.props;

    return (
      <div className="product-select-dock" >
        <div className="product-select-content">
          <div className="product-select-content-header">
            <div>
              <img src={item.image} alt='' />
            </div>
            <div className="product-price">
              <span>￥{toFixed(item.price)}</span>
              {/* <span>重量: {toFixed(item.weight)} kg</span> */}
            </div>
            <span className="close-model" onClick={this.props.hanldeOpenDrawer}><Icon type="close" /></span>
          </div>
          <div className="product-select-content-body">
            <div className="item">
              <span className="product-label">已选</span>
              <span>{item.sku}</span>
              <span className="product-select-number">{selectProductNumber}件</span>
            </div>
            <div className="item sku-list-container">
              <span className="product-label">产品</span>
              <div className="product-type-list">
                <div className="scroller">
                  {
                    item.skulist && item.skulist.map((data, index) => (
                      <span
                        key={index}
                        className={`sku-list ${item.product_id === data.product_id ? 'selected' : ''}`}
                        onClick={()=>this.handleSelectSku(data)}
                      >
                        {data.sku}
                      </span>
                    ))
                  }
                </div>
              </div>
            </div>
            <div className="item select-product-item">
              <span className="product-label">数量</span>
              <Stepper
                showNumber
                min={1}
                value={selectProductNumber}
                onChange={this.handleChangeProNumber}
              />
            </div>

            {
              +item.status !== 0 &&
              <div className='button-container'>
                <a
                  className={classNames("button", {
                    disabeld: this.props.repertoryNotEnough
                  })}
                  onClick={this.props.handleBuyProduct}
                >
                  立即购买
                </a>
                <Button type="warning" className="button button-add-cart" onClick={this.props.addCare}>加入购物车</Button>
              </div>
            }
          </div>
        </div>
      </div>
    )
  }
}